<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../favicon.ico">
<title>栅格应用-基于Bootstrap</title>
<!-- Bootstrap 核心CSS -->
<link rel="stylesheet" href="../../dist/css/bootstrap.min.css" >
<style>body { padding-top: 2rem; padding-bottom: 2rem; }
h3 { margin-top: 2rem; }
.row { margin-bottom: 1rem; }
.row .row { margin-top: 1rem; margin-bottom: 0; }
[class*="col-"] { padding-top: 1rem; padding-bottom: 1rem; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); }
hr { margin-top: 2rem; margin-bottom: 2rem; }
.themed-grid-col {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .2);
}

.themed-container {
  padding: 15px;
  margin-bottom: 30px;
  background-color: rgba(0, 123, 255, .15);
  border: 1px solid rgba(0, 123, 255, .2);
}
</style>
</head>
<body>

<div class="container">
  <h1>Bootstrap 栅格系统示例</h1>
  <p class="lead">基本的网格布局，以帮助您熟悉Bootstrap栅格系统中的构建。</p>
  <h3>五种屏幕下的布局：</h3>
  <p>Bootstrap网格系统有五种规格，每个设备支持一个系列。每一层都以最小的屏幕尺寸开始，并自动应用于较大的设备，除非被覆盖。</p>
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-lg-4">.col-lg-4</div>
    <div class="col-lg-4">.col-lg-4</div>
    <div class="col-lg-4">.col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-xl-4">.col-xl-4</div>
    <div class="col-xl-4">.col-xl-4</div>
    <div class="col-xl-4">.col-xl-4</div>
  </div>
  <h3>Three equal columns</h3>
  <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <h3>Three unequal columns</h3>
  <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
  </div>
  <h3>Two columns</h3>
  <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <h3>Full width, single column</h3>
  <p class="text-warning">No grid classes are necessary for full-width elements.</p>
  <hr>
  <h3>Two columns with two nested columns</h3>
  <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
  <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
  <div class="row">
    <div class="col-md-8"> .col-md-8
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <hr>
  <h3>Mixed: mobile and desktop</h3>
  <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
  <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
  <div class="row">
    <div class="col-12 col-md-8">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
  <hr>
  <h3>Mixed: mobile, tablet, and desktop</h3>
  <p></p>
  <div class="row">
    <div class="col-12 col-sm-6 col-lg-8">.col-12 .col-sm-6 .col-lg-8</div>
    <div class="col-6 col-lg-4">.col-6 .col-lg-4</div>
  </div>
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>


<div class="container" id="containers">
  <h2 class="mt-4">Containers</h2>
  <p>Bootstrap V4.4新增的类-Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.</p>
</div>

<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-fluid themed-container">.container-fluid</div>

<!-- /container -->

<!-- Bootstrap 核心 JavaScript --> 
<script src="../../../js/jquery-3.2.1.slim.min.js" ></script>
<script src="../../dist/js/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js" ></script>
</body>
</html>